<template>
  <s-layout title="传承官" :bgStyle="{ color: '#151515' }">
    <view class="officer">
      <view class="positionStatistics">
        <text class="text-1">持仓市值</text>
        <text class="text-2">￥563.34</text>
        <view class="positionStatistics-b ss-flex">
          <view>
            <view class="text-3">持仓成本</view>
            <view class="text-4">￥543.54</view>
          </view>
          <view>
            <view class="text-3">持仓传承官</view>
            <view class="text-4">2</view>
          </view>
        </view>
      </view>
      <view class="title">
        拥有的传承官
      </view>
      <view class="header ss-flex">
        <view>传承官名称</view>
        <view class="header-r ss-flex">
          <view>成本/市价</view>
          <view>盈亏/盈亏率</view>
        </view>
      </view>

      <view class="item ss-flex " @tap="sheep.$router.go('/pages/inherit/officialDetail', { id: 1 })">
        <view class="item-l ">
          <image src="@/static/img/inheritanceOfficer-1.png"></image>
        </view>
        <view class="item-r ss-flex-1">
          <view class="item-r-t ss-flex ss-row-center ss-row-between">
            <view class="text-1">汽车轮胎</view>
            <view class="text-2">市值498888</view>
          </view>
          <view class="item-r-b ss-flex ss-col-bottom ss-row-between">
            <view>
              <view></view>
              <view class="text-1">持仓(1)</view>
            </view>
            <view class="text-2">
              <view>49888.00</view>
              <view>59888.00</view>
            </view>
            <view class="text-3">
              <view>+19.80</view>
              <view>+3.64%</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

</script>

<style lang="scss" scoped>
  .officer {
    padding: 15px;
    box-sizing: border-box;
  }

  .positionStatistics {
    padding: 25px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #3D3A38;
    margin: 0 auto;

    .text-1 {
      font-weight: 300;
      font-size: 15px;
      color: #F17126;
      display: block;
    }

    .text-2 {
      font-weight: 500;
      font-size: 25px;
      color: #FFFFFF;
      margin: 19px 0;
      display: block;
    }

    .positionStatistics-b {
      > view {
        margin-right: 30px;
        text-align: left;
      }

      .text-3 {
        font-weight: 300;
        font-size: 12px;
        color: #FFFFFF;
        margin-bottom: 9px;
      }

      .text-4 {
        font-weight: 300;
        font-size: 12px;
        color: #999999;
      }
    }

  }

  .title {
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    margin: 27px 0 20px;
  }

  .header {
    padding: 0 16px;
    box-sizing: border-box;
    font-weight: 300;
    font-size: 12px;
    color: #767676;
    justify-content: space-between;
    margin-bottom: 15px;

    .header-r {
      view {
        margin-left: 33px;
      }
    }
  }

  .item {
    padding: 14px;
    box-sizing: border-box;
    background: #1E1E1E;
    border-radius: 10px;

    .item-l {
      image {
        width: 65px;
        height: 65px;
        margin-right: 13px;
      }
    }

    .item-r {
      .item-r-t {
        .text-1 {
          font-weight: 400;
          font-size: 15px;
          color: #E4E4E4;
        }

        .text-2 {
          font-weight: 400;
          font-size: 12px;
          color: #E4E4E4;
        }

        margin-bottom: 14px;
      }

      .item-r-b {
        .text-1{
          font-weight: 300;
          font-size: 12px;
          color: #868686;
        }
        .text-2{
          font-weight: 300;
          font-size: 12px;
          color: #EEEEEE;
          view{
            &:first-child{
              margin-bottom: 5px;
            }
          }
        }
        .text-3{
          font-weight: 300;
          font-size: 12px;
          color: #FF0000;
          view{
            &:first-child{
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
</style>
